<template>
  <div class="body">
    <el-row>
      <el-col :span="24">
        <el-row>
          <el-col>
            <div class="cangku">仓库管理大屏</div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="24">
        <el-row :gutter="10" type="flex" class="big" justify="center">
          <el-col :span="5">
            <div class="shuliang" style="border-bottom: 5px solid blue">
              <div class="tupian">
                <img src="~@/assets/images/img/财务总数.png" width="30" alt="" />
              </div>
              <div class="caiwu">
                <div>财务总数</div>
                <p>{{ count }}</p>
              </div>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="shuliang" style="border-bottom: 5px solid rgb(60, 205, 241)">
              <div class="tupian">
                <img src="~@/assets/images/img/月入库.png" alt="" />
              </div>
              <div class="caiwu">
                <div>月入库</div>
                <p>{{ dateCount.twoM }}</p>
              </div>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="shuliang" style="border-bottom: 5px solid rgb(102, 220, 195)">
              <div class="tupian">
                <img src="~@/assets/images/img/日入库.png" alt="" />
              </div>
              <div class="caiwu">
                <div>日入库</div>
                <p>{{ dateCount.twoD }}</p>
              </div>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="shuliang" style="border-bottom: 5px solid rgb(238, 203, 88)">
              <div class="tupian">
                <img src="~@/assets/images/img/月出库.png" alt="" />
              </div>
              <div class="caiwu">
                <div>月出库</div>
                <p>{{ dateCount.threeM }}</p>
              </div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="shuliang" style="border-bottom: 5px solid rgb(245, 137, 81)">
              <div class="tupian">
                <img src="~@/assets/images/img/日出库.png" alt="" />
              </div>
              <div class="caiwu">
                <div>日出库</div>
                <p>{{ dateCount.threeD }}</p>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="24" class="tubiao">
        <el-row :gutter="10" type="flex" class="big2" justify="center">
          <el-col :span="12">
            <div class="tubiao1">
              <div class="headtu">
                <div class="xian"></div>
                <div class="headtou">仓库库存柱状图</div>
                <div class="time1">
                  <el-select v-model="value" placeholder="2022年" size="mini">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div ref="chart" class="tu1" style="width: 640px; height: 330px"></div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="tubiao1">
              <div class="headtu">
                <div class="xian"></div>
                <div class="headtou">出入库信息图</div>
                <div class="time1">
                  <el-select v-model="value" placeholder="2022年" size="mini">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div ref="broken" class="tu1" style="width: 640px; height: 330px"></div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="24" class="big3">
        <div>
          <el-table
            v-loading="loading"
            ref="multipleTable"
            :data="list"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column align="center" type="index" width="115" label="序号">
            </el-table-column>
            <!-- <el-table-column align="center" prop="serialNum" label="编号"> </el-table-column> -->
            <el-table-column align="center" prop="name" label="物品名称"> </el-table-column>
            <el-table-column align="center" prop="type" label="物品类型"> </el-table-column>
            <el-table-column align="center" prop="count" label="数量"> </el-table-column>
            <el-table-column align="center" label="物品图片">
              <template slot-scope="scope">
                <image-preview
                  v-if="scope.row.deliverImg"
                  :src="scope.row.deliverImg"
                  :height="60"
                ></image-preview>
                <span v-else>暂无图片</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="入库图片">
              <template slot-scope="scope">
                <image-preview
                  v-if="scope.row.storeImg"
                  :src="scope.row.storeImg"
                  :height="60"
                ></image-preview>
                <span v-else>暂无图片</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="phName" label="办案人员"></el-table-column>
            <el-table-column align="center" prop="wName" label="仓库"></el-table-column>
            <el-table-column align="center" prop="manager" label="仓库人员"></el-table-column>
            <el-table-column align="center" prop="createTime" label="登记时间">
              <template slot-scope="scope">
                {{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="remark" label="记录"></el-table-column>
          </el-table>
        </div>
        <Pagination
          class="page-container"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="pageGetList"
        ></Pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getList } from '@/api/propertyInfo'
import { parseTime } from '@/utils/ruoyi'
import { getPropertyInfo } from '@/api/property/propertyList'
export default {
  data() {
    return {
      options: [
        {
          value: '选项1',
          label: '2022年'
        }
      ],
      value: '',
      // 数据
      list: [],
      // 选择数据
      multipleSelection: [],
      loading: false,
      // 数据条数
      total: 0,
      // 分页查询
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      count: 0,
      dateCount: {
        twoM: [],
        twoD: [],
        threeM: [],
        threeD: []
      }
    }
  },

  mounted() {
    this.initCharts()
    // 初始化数据
    this.loadList()
    this.init()
    getPropertyInfo().then((res) => {
      this.count = res.rows.map((e) => e.count).reduce((e, s) => e + s)
      // let dateCount = {
      //   twoM: [],
      //   twoD: [],
      //   threeM: [],
      //   threeD: []
      // }

      res.rows.forEach((e) => {
        const twoM = parseTime(e.registryTime, '{m}') === parseTime(new Date(), '{m}')
        const twoD = parseTime(e.registryTime, '{d}') === parseTime(new Date(), '{d}')

        for (const key in this.dateCount) {
          const type = key === 'threeM' || key === 'threeD' ? '3' : '2'
          const date = key === 'threeM' || key === 'twoM' ? twoM : twoD
          if (e.registryStatus === type && date) {
            this.dateCount[key].push(e.count)
          }
        }
      })

      for (const key in this.dateCount) {
        this.dateCount[key] = this.dateCount[key].length
          ? this.dateCount[key].reduce((e, s) => e + s)
          : 0
      }
    })
  },
  methods: {
    parseTime,
    init() {
      // 在数据更新后马上执行回调
      this.$nextTick(() => {
        const el = document.getElementById(this.$refs.chart)
        if (el) {
          window.addEventListener('resize', function () {
            el.resize()
          })
        }
      })
    },
    initCharts() {
      //柱状
      let myChart = this.$echarts.init(this.$refs.chart)
      myChart.setOption({
        // title: {
        //   text: "World Population",
        // },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月'
          ]
        },
        yAxis: [
          {
            type: 'value',
            max: 250,
            axisTick: { show: false },
            axisLine: {
              show: false
            },
            splitLine: { show: true, lineStyle: { type: 'dashed' } }
          }
        ],
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130, 120, 150, 160, 140, 170],
            barWidth: '20',
            type: 'bar',
            itemStyle: {
              normal: {
                //设置柱子圆角
                barBorderRadius: [30, 30, 0, 0],
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: 'rgb(56,138,255)' },
                    { offset: 1, color: 'rgb(134,207,255)' }
                    // {offset: 0.5, color: '#188df0' },
                  ]
                }

                // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                //   { offset: 0, color: '#83bff6' },
                //   { offset: 0.5, color: '#188df0' },
                //   { offset: 1, color: '#188df0' }
                // ])
              }
            }
          }
        ]
      })
      //折线
      let myBroken = this.$echarts.init(this.$refs.broken)
      myBroken.setOption({
        // title: {
        //   text: 'Stacked Line'
        // },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['入库数量', '出库数量']
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
        },
        yAxis: [
          {
            type: 'value',
            max: 250,
            axisTick: { show: false },
            axisLine: {
              show: false
            },
            splitLine: { show: true, lineStyle: { type: 'dashed' } }
          }
        ],
        series: [
          {
            name: '入库数量',
            // stack: 'Total',
            data: [130, 100, 150, 200, 170, 140, 100],
            type: 'line',
            smooth: true,
            color: 'rgb(154,185,233)',
            areaStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: 'rgb(189,210,244)' },
                  { offset: 1, color: 'rgb(245,250,251)' }
                  // {offset: 0.5, color: '#188df0' },
                ]
              }
            }
          },
          {
            name: '出库数量',
            // stack: 'Total',
            data: [90, 190, 80, 168, 140, 100, 160],
            type: 'line',
            smooth: true,
            color: 'rgb(161,224,192)',
            areaStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: 'rgb(174,228,199)' },
                  { offset: 1, color: 'rgb(245,250,251)' }
                  // {offset: 0.5, color: '#188df0' },
                ]
              }
            }
          }
        ]
      })
    },

    //列表
    search(queryForm) {
      this.loadList(queryForm)
    },
    // 获取数据
    loadList(queryForm = null) {
      // ${process.env.VUE_APP_BASE_API}
      // if (queryForm && queryForm.wId) queryForm.wIds = queryForm.wId
      this.loading = true
      getList(queryForm).then((res) => {
        res.rows.forEach((item) => {
          if (item.type) {
            switch (item.type) {
              case '1':
                item.type = '普通物品'
                break
              case '2':
                item.type = '特殊物品'
                break
              case '3':
                item.type = '车辆'
                break
            }
            // if (item.storeImg || item.deliverImg) {
            //   item.storeImg = `${process.env.VUE_APP_BASE_API}${item.storeImg}`
            //   item.deliverImg = `${process.env.VUE_APP_BASE_API}${item.deliverImg}`
            //   console.log(item.storeImg)
            // }
          }
        })
        this.list = [...res.rows]
        this.total = res.total
        this.loading = false
      })
    },
    // 分页查询
    pageGetList() {
      getList(this.queryParams).then((response) => {
        this.list = response.rows
        this.total = response.total
      })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    }
  }
}
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
/* 总数 */
.body {
  background-color: rgb(244, 244, 244);
}
.cangku {
  background-color: rgb(47, 111, 219);
  text-align: center;
  color: white;
  font-size: 10px;
  height: 30px;
  line-height: 30px;
}
.big {
  padding: 0 10px 0 10px;
}
.shuliang {
  margin-top: 10px;
  text-align: center;
  background-color: white;
  width: 100%;
  border-radius: 5px;
  height: 90px;
  padding: 15px 0 0 12%;
}
.shuliang div {
  float: left;
}
.tupian {
  margin-top: 15px;
}
.caiwu {
  margin-left: 10%;
}
.caiwu div {
  /* margin-top: 10px; */
  height: 25px;
  line-height: 25px;
  color: gray;
  font-size: 8px;
}
.caiwu p {
  font-size: 25px;
  font-weight: bold;
}

/* 图表 */
.big2 {
  padding: 1rem 10px 0 10px;
}
.tubiao1 {
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 10px;
  border-bottom: 1px solid rgb(228, 228, 228);
}
.headtu {
  height: 50px;
  border-bottom: 1px solid rgb(228, 228, 228);
}
/* .headtu div {
  margin-top: 10px;
} */
.headtu .xian {
  height: 13px;
  border-left: 2px solid blue;
  float: left;
  margin: 20px 0 0 10px;
}
.headtu .headtou {
  margin-top: 15px;
  margin-left: 10px;
  float: left;
  font-weight: bold;
}
.headtu .time1 {
  float: right;
  margin-right: 20px;
  width: 85px;
  margin-top: 10px;
}
.tu1 {
  width: 100%;
  margin: -30px 0 0 -20px;
}

.liebiao {
  /* margin-top: 1rem; */
}
.big3 {
  padding: 1rem 10px 0 10px;
}
</style>
